<template>
	<div class="son">
		<h3>我是Son组件（孙），{{ car.name }}--{{ car.price }}</h3>
		<button @click="changeCarInfo">修改祖 传来的car</button>
	</div>
</template>

<script>
import {inject, readonly} from 'vue'

export default {
	name: 'Son',
	setup() {

		let car = inject('car')
		console.log('Son car', car)

		function changeCarInfo() {
			car = readonly(car) //做限制

			car.name = 'console'
			car.price++ // 与祖 传来的 car 是同一对象
			console.log('Son changeCarInfo', car)
		}

		return {changeCarInfo, car}
	}
}
</script>

<style>
.son {
	background-color: orange;
	padding: 10px;
}
</style>